<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>面板示例</title>
	
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.lite.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.8.0.min.js"></script>
	<script src="../../api/jquery-tag-demo.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
    <link rel="stylesheet" type="text/css" href="../../api/demo.css">
	
</head>
<body>
	<h2>页签</h2>
	<h3>说明:</h3>
    <span>页签（Tabs ）一次仅显示一个面板（panel），每个面板（panel）都有标题、图标和关闭按钮。 当 Tabs 被选中时，将显示对应的面板（panel）的内容。</span>
	<h3>如：</h3>
	<!-- default gray-->
	<div class="demo-exp-code entry-content"> 
		
		<div id="tt" class="hisui-tabs"  style="width:500px;height:100px;" >
			<!--wanghc 2018-04-11 tab页签上不要增加小图标 data-options="iconCls:'icon-add-note'"-->   
			<div title="电子病历" style="padding:20px;">   
				tab1 电子病历
			</div>   
			<div title="诊断录入" data-options="closable:true" style="overflow:auto;padding:20px;">   
				tab1   诊断录入  
			</div>   
			<div title="医嘱录入" data-options="closable:true" style="padding:20px;">   
				tab1   医嘱录入 
			</div> 
		</div>
	</div>
	<!-- gray tabs-->
	<h3>点击监听</h3>
	<!-- <div id="tab-tools">
		<a id="btQuotation" title="引用" href="#" class="hisui-linkbutton">引用</a>
	</div> -->
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint lang-html">
	<div id="tt2" class="hisui-tabs" style="width:500px;height:150px;">   
		<div title="电子病历" style="padding:20px;">   
			如果页签太多则自动隐藏，可滚动显示 
		</div>   
		<div title="诊断录入" data-options="closable:false" style="overflow:auto;padding:20px;">   
			诊断录入    
		</div>   
		<div title="医嘱录入" data-options="closable:false" style="padding:20px;">   
			医嘱录入    
		</div>  
		<div title="检查列表" data-options="closable:false" style="padding:20px;">   
			检查列表    
		</div>
	</div>
		</div>
		<div class="use-prettyprint lang-js">
			<script type="text/javascript">
				$(function(){
					$HUI.tabs("#tt2",{
						onSelect:function(title){
							$.messager.popover({type:'info',msg:'切换到【'+title+'】'}); //alert('你确定要切换到【'+title+'】');					
						}
					});
					//$('#tt2').tabs('disableTab', 0); 
				});
			</script>
		</div> 
	</div>	
	

	<h3>页签过多滚动效果</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint">
			<div id="mytabs1" class="hisui-tabs" style="width:500px;height:100px;">   
				<div title="电子病历" data-options="" style="padding:20px;"></div>   
				<div title="诊断录入" data-options="" style="padding:20px;"></div>   
				<div title="医嘱录入" data-options="" style="padding:20px;"></div>
				<div title="检查列表" data-options="" style="padding:20px;"></div>
				<div title="检验列表" data-options="" style="padding:20px;"></div>
				<div title="过敏记录" data-options="" style="padding:20px;"></div>
				<div title="生命体征" data-options="" style="padding:20px;"></div>
				<div title="就诊列表" data-options="" style="padding:20px;"></div>
			</div>
		</div>
	</div>	
	<h3>第一个页签作为标题的图表组(<code>isBrandTabs:true</code>)</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint">
			<div id="tt-brand-gray" class="hisui-tabs" style="width:500px;height:150px;" data-options="isBrandTabs:true">   
				<div title="医嘱浏览" style="padding:20px;" data-options="iconCls:'icon-add-note'"></div>   
				<div title="全部" data-options="closable:false" style="padding:20px;"></div>
				<div title="药品" data-options="closable:false" style="padding:20px;"></div>  
				<div title="检查" data-options="closable:false" style="padding:20px;"></div>
				<div title="检验" data-options="closable:false" style="padding:20px;"></div>  
			</div>
		</div>
	</div>
	<prettyprint/>
</body>
</html>